<template>
	<view class="index-content">
		<view class="login-form">
			<view class="title">
				用户登陆
			</view>
			<view style="height: 48rpx;"></view>
			<view class="inputitem ">
				<view class="icon">
					<u--image :showLoading="true" :src="user" width="68rpx" height="72rpx"></u--image>
				</view>
				<view class="input">
					<u--input placeholder="请输入账号" border="none" v-model="from.username"></u--input>
				</view>
			</view>
			<view style="height: 32rpx;"></view>
			<view class="inputitem ">
				<view class="icon">
					<u--image :showLoading="true" :src="dma" width="68rpx" height="72rpx"></u--image>
				</view>
				<view class="input">
					<u--input placeholder="请输入密码" type="password" border="none" v-model="from.password"></u--input>
				</view>
			</view>

			<view class="" style="height: 48rpx;">
			</view>
			<view class="">
				<u--image :showLoading="true" @click="goProject" :src="btn" width="100%" height="90rpx"></u--image>
			</view>
			<view class="" style="height: 10rpx;">
			</view>

		</view>
	</view>
</template>

<script>
import user from "@/static/login/user.png"
import dma from "@/static/login/dma.png"
import sx from "@/static/login/sx.png"
import yzm from "@/static/login/yzm.png"
import btn from "@/static/login/btn.png"
import { login } from "@/api/index"
import { setToken } from "@/utils/auth";

export default {
	data() {
		return {
			user,
			dma,
			yzm,
			sx,
			btn,
			from: {
				"username": "admin",
				"password": "!@#123qwe",
				"tenantId": "123456",
			}
		}
	},
	onLoad() {

	},
	methods: {
		async goProject() {
			let {data}=await login(this.from)
			setToken(data)
			uni.setStorageSync('logindata',data)
			uni.navigateTo({
				url: "/pages/project/project"
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.index-content {
	height: 100vh;
	background-image: url('/static/login/bj.png');
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: top center;

	.login-form {
		margin: 0 32rpx;
		// 32
		background: rgba(255, 255, 255, 0.1);
		border-radius: 24rpx;
		color: #fff;
		position: fixed;
		top: 492rpx;
		left: 32rpx;
		right: 32rpx;

		border: 2rpx solid rgba(255, 255, 255, 0.2);
		padding: 50rpx;

		.title {
			text-align: center;
			font-size: 40rpx;
		}

		.yzmbox {
			display: flex;

			.yzm {
				width: 140rpx;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.wjmm {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.8);
			text-align: center;
			line-height: 40rpx;
		}

		.inputitem {
			flex: 1;
			height: 74rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 8rpx;
			display: flex;

			.icon {
				width: 74rpx;
				height: 74rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.input {
				flex: 1;
				width: 0;
				display: flex;
				align-items: center;
				// padding: 0 24rpx;
			}
		}

		// 77- 25 -28 53 24
		// 108138 246
	}
}
</style>